<%--
  Created by IntelliJ IDEA.
  User: 14648
  Date: 2021/10/29
  Time: 10:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
      media="screen" />
<html>
<head>

    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="css/jquery-ui.min.css"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

    <title>Welcome</title>
    <meta charset="utf-8">
    <title>MyJPetStore</title>

    <style type="text/css">
        .button{
            cursor: pointer;
            width: 180px;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            text-shadow:1px 1px 1px #333;
            border-radius: 5px;
            margin:0 20px 20px 0;
            position: relative;
            overflow: hidden;
        }
        .button:nth-child(6n){
            margin-right: 0;
        }
        .button.green{
            border:1px solid #64c878;
            box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
            background: -webkit-linear-gradient(top,#90dfa2,#84d494);
            background: -moz-linear-gradient(top,#90dfa2,#84d494);
            background: linear-gradient(top,#90dfa2,#84d494);
        }
        .green:hover{
            background: -webkit-linear-gradient(top,#aaebb9,#82d392);
            background: -moz-linear-gradient(top,#aaebb9,#82d392);
            background: linear-gradient(top,#aaebb9,#82d392);
        } .green:active{
              top:1px;
              box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
              background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
              background: -moz-linear-gradient(top,#5eac6e,#72b37e);
              background: linear-gradient(top,#5eac6e,#72b37e);
          }
        * {
            padding: 0px;
            margin: 0px;
        }
        a {
            text-decoration: none;
        }
        ul {
            list-style: outside none none;
        }
        .slider, .slider-panel img, .slider-extra {
            width: 650px;
            height: 413px;
        }
        .slider {
            text-align: center;
            margin: 30px auto;
            position: relative;
        }
        .slider-panel, .slider-nav, .slider-pre, .slider-next {
            position: absolute;
            z-index: 8;
        }
        .slider-panel {
            position: absolute;
        }
        .slider-panel img {
            border: none;
        }
        .slider-extra {
            position: relative;
        }
        .slider-nav {
            margin-left: -51px;
            position: absolute;
            left: 50%;
            bottom: 4px;
        }
        .slider-nav li {
            background: #3e3e3e;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            margin: 0 2px;
            overflow: hidden;
            text-align: center;
            display: inline-block;
            height: 18px;
            line-height: 18px;
            width: 18px;
        }
        .slider-nav .slider-item-selected {
            background: blue;
        }
        .slider-page a{
            background: rgba(0, 0, 0, 0.2);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
            color: #fff;
            text-align: center;
            display: block;
            font-family: "simsun";
            font-size: 22px;
            width: 28px;
            height: 62px;
            line-height: 62px;
            margin-top: -31px;
            position: absolute;
            top: 50%;
        }
        .slider-page a:HOVER {
            background: rgba(0, 0, 0, 0.4);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
        }
        .slider-next {
            left: 100%;
            margin-left: -28px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            var length,
                currentIndex = 0,
                interval,
                hasStarted = false, //是否已经开始轮播
                t = 3000; //轮播时间间隔
            length = $('.slider-panel').length;
            //将除了第一张图片隐藏
            $('.slider-panel:not(:first)').hide();
            //将第一个slider-item设为激活状态
            $('.slider-item:first').addClass('slider-item-selected');
            //隐藏向前、向后翻按钮
            $('.slider-page').hide();
            //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
            $('.slider-panel, .slider-pre, .slider-next').hover(function() {
                stop();
                $('.slider-page').show();
            }, function() {
                $('.slider-page').hide();
                start();
            });
            $('.slider-item').hover(function(e) {
                stop();
                var preIndex = $(".slider-item").filter(".slider-item-selected").index();
                currentIndex = $(this).index();
                play(preIndex, currentIndex);
            }, function() {
                start();
            });
            $('.slider-pre').unbind('click');
            $('.slider-pre').bind('click', function() {
                pre();
            });
            $('.slider-next').unbind('click');
            $('.slider-next').bind('click', function() {
                next();
            });
            /**
             * 向前翻页
             */
            function pre() {
                var preIndex = currentIndex;
                currentIndex = (--currentIndex + length) % length;
                play(preIndex, currentIndex);
            }
            /**
             * 向后翻页
             */
            function next() {
                var preIndex = currentIndex;
                currentIndex = ++currentIndex % length;
                play(preIndex, currentIndex);
            }
            /**
             * 从preIndex页翻到currentIndex页
             * preIndex 整数，翻页的起始页
             * currentIndex 整数，翻到的那页
             */
            function play(preIndex, currentIndex) {
                $('.slider-panel').eq(preIndex).fadeOut(500)
                    .parent().children().eq(currentIndex).fadeIn(1000);
                $('.slider-item').removeClass('slider-item-selected');
                $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
            }
            /**
             * 开始轮播
             */
            function start() {
                if(!hasStarted) {
                    hasStarted = true;
                    interval = setInterval(next, t);
                }
            }
            /**
             * 停止轮播
             */
            function stop() {
                clearInterval(interval);
                hasStarted = false;
            }
            //开始轮播
            start();
        });
    </script>
</head>

<body  style="background: url(images/013.jpg);background-size:100% 100% ; background-attachment: fixed ">
<h1 style="text-align:center;"  >Welcome to mypetstore</h1>
<div class="slider">
    <ul class="slider-main">

        <li class="slider-panel">
            <a href="viewCategory?categoryId=BIRDS" target="_blank"><img alt="" title="" src="images/70.jpg"></a>
        </li>
        <li class="slider-panel">
            <a href="viewCategory?categoryId=FISH" target="_blank"><img alt="" title="" src="images/60.jpg"></a>
        </li>
        <li class="slider-panel">
            <a href="viewCategory?categoryId=DOGS" target="_blank"><img alt="" title="" src="images/30.jpg"></a>
        </li>
        <li class="slider-panel">
            <a href="viewCategory?categoryId=CATS" target="_blank"><img alt="" title="" src="images/40.jpg"></a>
        </li>
        <li class="slider-panel">
            <a href="viewCategory?categoryId=REPTILES" target="_blank"><img alt="" title="" src="images/50.jpg"></a>
        </li>

    </ul>
    <div class="slider-extra">
        <ul class="slider-nav">
            <li class="slider-item">1</li>
            <li class="slider-item">2</li>
            <li class="slider-item">3</li>
            <li class="slider-item">4</li>
            <li class="slider-item">5</li>
        </ul>
        <div class="slider-page">
            <a class="slider-pre" href="javascript:"><</a>
            <a class="slider-next" href="javascript:;;">></a>
        </div>
    </div>
</div>



    <p style="text-align:center;" size="9"> <a  class="button green" href="main" >Enter the petstore</a></p>

</body>
</html>